<template>
  <div class="hello">
    <van-button type="primary">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-cell title="单元格" value="内容" />
    <van-cell-group title="分组1">
      <van-cell title="单元格" value="内容" />
    </van-cell-group>
    <van-cell-group title="分组2">
      <van-cell title="单元格" value="内容" />
    </van-cell-group>
    <van-icon name="chat-o" />
    <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
    <van-icon name="chat-o" size="37.5" />
    <div class="icon_box">
      <van-icon name="chat-o" dot />
      <div>你大爷</div>
    </div>

    <van-image
      width="100"
      height="100"
      src="https://img.yzcdn.cn/vant/cat.jpeg"
    />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import {
  Row,
  Col,
  Icon,
  Cell,
  CellGroup,
  Button,
  Image as VanImage,
} from "vant";
@Options({
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [VanImage.name]: VanImage,
  },
  props: {
    msg: String,
  },
})
export default class HelloWorld extends Vue {
  msg!: string;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.icon_box {
  font-size: 16px;
}
</style>
